<template>
	<el-drawer direction="ltr" custom-class="demo-drawer" title="专辑" v-model="visible" @closed="closed">
		<div class="demo-drawer__content m-r-sm">
			<el-form :model="model" label-width="80px">
				<el-form-item label="名称">
					<el-input v-model="model.name"></el-input>
				</el-form-item>
				<el-form-item label="媒体类型">
					<el-select v-model="model.mediaType" placeholder="媒体类型">
						<el-option v-for="item in mediaTypes" :key="item.code" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="封面">
					<el-upload ref="upload" :file-list="fileList" :limit="1" drag :action="this.$api.file.url.upload" name="localFile"
					 :on-success="uploadSuccess" :before-upload="beforeAvatarUpload" :on-remove="removeUploadFile" style="width: 100%;">
						<el-popover trigger="hover" placement="right">
							<el-image style="height: 500px" :fit="contain" :src="posterUrl" fit="contain">
							</el-image>
							<div slot="reference" class="name-wrapper">
								<el-image style="height: 180px;" v-show="model.poster" :src="posterUrl" fit="cover">
								</el-image>
							</div>
						</el-popover>
						<div v-show="!model.poster">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						</div>
						<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer text-center">
				<el-button style="width: 40%;" @click="visible = false">取 消</el-button>
				<el-button style="width: 40%;" type="primary" @click="onSubmit()">提交</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script scoped>
	export default {
		props: {
			visibled: {
				type: Boolean,
				default: false
			},
			id: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				visible: false,
				fileList: [],
				mediaTypes: [],
				model: {
					name: '',
					mediaType: '',
					poster: ''
				},
				posterUrl: '', //http://localhost:8888/file/view/648cc6bdd429403394a640f4fffe5f7a'
			}
		},
		mounted() {
			this.$api.sysDict.queryDictItems("media_type").then(data => {
				this.mediaTypes = data;
			});
		},
		methods: {
			closed() {
				this.$refs.upload.clearFiles(); //清空上传列表
				this.model = {};
				this.posterUrl = '';
				this.$emit('close', this.model);
			},
			uploadSuccess(res, file, fileList) {
				this.model.poster = res.data.code;
				this.posterUrl = this.$api.file.url.view + res.data.code;
			},
			removeUploadFile(file, fileList) {
				console.debug("file", file);
				console.debug("fileList", fileList);
				this.model.poster = null;
				this.posterUrl = null;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			onSubmit() {
				if (this.model.id == null) {
					this.$api.album.add(this.model).then(data => {
						this.model.id = data;
						console.debug('model.id', data);
					});
				} else {
					this.$api.album.update(this.model);
				}
			}
		},
		watch: {
			visibled(newValue, oldValue) {
				this.visible = newValue;
			},
			id(id, oldValue) {
				if (id != null) {
					this.$api.album.queryById(id).then(data => {
						this.model = data;
						this.posterUrl = this.$api.file.url.view + this.model.poster;
					});
				}
			}
		}
	}
</script>

<style>
</style>
